<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<!--登录区主体开始-->
		<div id="main">
			<!--头像区开始-->
			<div id="header-border">
				<!--头像区内部开始-->
				<div id="header-pic">
					
				</div>
				<!--头像区内部结束-->
			</div>
			<!--头像区结束-->
			<!--账号密码区开始-->
			<div id="account">
				<form action="">
					<div class="input">						
						<input id="userLoginName" name="userLoginName" type="text" placeholder="请输入用户名"/>
					</div>
					<div class="input">					
						<input id="userPwd" name="userPwd" type="password" placeholder="请输入密码"/>
					</div>
				</form>				
			</div>
			<!--账号密码区结束-->
			<!--登录按钮开始-->
			<input type="button" value="登录" class="login-btn" />
			<a class="register-btn" href="AddUser.html">注册</a>
			<!--<input type="button" value="注册" class="register-btn" />-->
			<!--登录按钮结束-->
			<!--网页底部开始-->
			<div id="footer">
				<a href="#">忘记密码</a>
			</div>
			<!--网页底部结束-->
		</div>		
		<!--登录区主体结束-->
		
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/global.js" ></script>
		<script type="text/javascript" src="js/layer/layer.js" ></script>
		<script>
			//打开网页，判断当前浏览器本地是否有 头像缓存
			if(localStorage.getItem('userPic')){
				$('#header-pic').css('background','url(' + localStorage.getItem('userPic') +')');
			}
			//打开网页，判断当前浏览器本地是否有 用户名
			if(localStorage.getItem('userLoginName')){
				$('userLoginName').val(localStorage.getItem('userLoginName'));
			}
			
			//登陆按钮单击事件
			$('.login-btn').click(function() {
				
				//请求参数
				var params = {
					userLoginName:$('#userLoginName').val(),
					userPwd:$('#userPwd').val()
				}
								
				//ajax请求
				$.post(baseUrl + '/user/login',params,function(data){
					
					if (data == 1) {
						layer.msg('用户名不存在');
					} else if (data == 2) {
						layer.msg('密码错误');
					} else {
						layer.msg('登陆成功');
						
						//记录用户名到浏览器本地 存储
						localStorage.setItem("userLoginName" , $('#userLoginName').val());
						
						/*发出ajax请求  得到当前登录用户的头像  修改预览图*/
						$.get(baseUrl + '/user/getPic' , function(data){
					
							if(data && data != 'null'){
								localStorage.setItem('userPic' , data);
							}else{
								localStorage.removeItem('userPic');
							}
						})
						.error(function(xhr){
							layer.msg('请求失败,' + xhr.status);
						});
						setTimeout(function(){
							location.href = 'me.html';
						},500);
					}
					
				})
				.error(function(xhr,status,text){
					layer.msg('请求失败,' + text);					
				});
				
				
			});			
		</script>		
	</body>
</html>
